import React, { useEffect, useState } from 'react'
import Hoc from '../Hoc'
import axios from '../axios/axios'
import '../css/department.css'
import { Success,Cross} from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
export default function Department() {
    const nav = useNavigate()
    const [date, setDate] = useState([])
    const [department, setDepartment] = useState([])
    const [num, setNum] = useState(0)
    const [idx, setIdx] = useState('668b83e77b1593a2e4070b06')
    const get_date = async () => {
        let data = await axios.get('/get_date')
        setDate(data.data)
    }
    const get_department = async () => {
        let data = await axios.get('/get_department')
        setDepartment(data.data)
    }
    const set = async (index, id) => {
        setNum(id)
        setIdx(id)
    }
    const tz=async(id)=>{
        nav(`/xiangqing/?id=${id}`)
    }
    useEffect(() => {
        get_date()
        get_department()
    }, [])
    return (
        <div style={{ backgroundColor: 'rgb(243,246,255)' }}>
            <Hoc title='科室'></Hoc>
            {date.map((item, index) => {
                return <div key={item._id} className='date' onClick={() => set(index, item._id)}>
                    {item.status ? <div className='date1'>{item.date}</div> : <div className='date2'>{item.date}</div>}
                    {item.status ? <div className='date3'>{item.hao}</div> : <div className='date4'>{item.hao}</div>}
                </div>
            })}
            <br></br><br></br><br></br>
            <div className='department'>
                {department.map((item, index) => {
                    if (item.did == idx) {
                        return <div key={index} className='department1' onClick={()=>tz(item._id)}>
                            <img src={item.img} className='department_img' />
                            <div className='department_content'>
                                <div className='department_title'><span className='department_name'>{item.name}</span><span className='department_physician'>{item.physician}</span> <span className='department_yuyue'>预约</span></div>
                                <div className='department_keshi'>{item.hospital} {item.department}</div>
                                <div className='department_speciality'>擅长：{item.speciality}</div>
                                
                                <div>
                                    {item.status ? <span className='department_status1'><Cross  className='cuo'/>不可预约</span> : <span className='department_status2'><Success className='dui'/>预约挂号</span>}  
                                    {item.status ? <span className='department_status3'><Success className='dui'/>在线咨询</span> : <span className='department_status3'><Success className='dui'/>在线咨询</span>}
                                </div>
                            </div>
                        </div>
                    }
                })}
            </div>
        </div>
    )
}
